<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body>
<div id="app">
    <component1></component1>
    <component2></component2>
</div>

<div id="app1">
    <component1></component1>
</div>

<template id="component1">
    <div style="background: darkcyan">
        <h2>我的第一个组件</h2>
        <h2>你们好</h2>
    </div>
</template>

<template id="component2">

    <div style="background: aqua">
        <component1></component1>
        <h2>我的第二个组件</h2>
    </div>
</template>

</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 全局组件：只要是用 Vue.component 来创建的组件都是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，局部组件和子组件都能使用
     * 比如你实例了两个new Vue();这个全局组件就可以在这两个实例上都可以使用。（但是我们一般不会创建两个实例）
     * */
    Vue.component('component1', {
        template: '#component1'
    });

    /**
     * 局部组件：在实例的属性components或者是组件里的属性components上注册组件，叫局部组件，局部注册的组件在其子组件中不可用，如果要使用需要多重嵌套
     * @type {{template: string}}
     */
    const component2 = {
        template: '#component2'
    }
    const app = new Vue({
        el: '#app',
        components: {
            'component2': component2
        }
    })

    const app1 = new Vue({
        el: '#app1',
    })

</script>
</html>